
{% extends "base.html" %}

{% block content %}
	<div id="deal_list"></div>
	<div style="clear:both"></div>
	<div id="lastPostsLoader"></div>
	<script type="text/javascript">
	 var big_list = new Array(
	 {% for item in big_list %}					
	 	new Array("{{item.link}}","{{item.photo_url}}","{{item.title}}"), 
	 	{% endfor %}
	 	new Array()
	 );
	 big_list.pop();
	 
	 var med_list = new Array(
	 {% for item in med_list %}					
	 	new Array("{{item.link}}","{{item.photo_url}}","{{item.title}}"), 
	 	{% endfor %}
	 	new Array()
	 );
	 med_list.pop();
	 
	 var small_list = new Array(
	 {% for item in small_list %}					
	 	new Array("{{item.link}}","{{item.photo_url}}","{{item.title}}"), 
	 	{% endfor %}
	 	new Array()
	 );
	 small_list.pop();
			
	<!-- general information of items -->
	/*
	var big_list_length = big_list.length;
	var med_list_length = med_list.length;
	var small_list_length = small_list.length;*/
	var num_of_items = big_list.length + med_list.length + small_list.length;
	
	<!-- general information of image blocks -->
	var blocks = new Array();
	var num_of_mid_childs = 2;
	var num_of_small_childs = 4;
	var blocks_array_size =0;
	
	$(document).ready(function(){
	
		setDIV();
	});
	
	
	function setDIV()
	{	
		var rnd = 0;
		var cnt = 0;
		
		while(cnt < num_of_items)
		{
			rnd = randomRange(0,1);
			if(rnd == 0 && big_list.length > 0)
			{
				var item = big_list.shift();
				var data = "<div class=\"tiled_frame_big\"><a target=_blank' href='" + item[0] + "'><img class=\"tiled_image tiled_image_big\" onload=\"this.style.opacity=1\" src=\""+ item[1] +"\"></a></div>";			
				$("#deal_list").append(data);	
				cnt++;
			}
			else
			{	
				var data = "<div class=\"tiled_frame_mid\">";
				var ndata= "";
				var loop_count = 0;
				while(true)
				{
					if(med_list.length == 0 && small_list.length == 0)
					{
						break;
					}
				    rnd = randomRange(0,1);
				  
				  
					if(rnd == 0 && med_list.length > 0)
					{
							var item = med_list.shift();
							cnt++;
							ndata+= "<a target=_blank' href='" + item[0] + "'><img class='tiled_image tiled_image_mid' onload=\"this.style.opacity=1\" src='"+ item[1] +"'></a>";
							loop_count++;
		 			}
					else if(small_list.length > 0)
					{
						var subdata = "<div class=\"tiled_frame_small\">";
						for(j=0; j< 4; j++)
						{
							if(small_list.length ==  0)
							{
								break;
							}
							
							var item = small_list.shift();
							cnt++;
							subdata+=  "<a target=_blank' href='" + item[0] + "'><img class='tiled_image tiled_image_small' onload=\"this.style.opacity=1\" src='"+ item[1] +"'></a>";
					  }
					  	
						subdata += "</div>";
						ndata += subdata;
						loop_count++;
					}
					
					if(loop_count == 2)
					{
						break;
					}
				}
			    data += ndata;		  
				data += "</div>";	
				if(loop_count > 0)
				{
					$("#deal_list").append(data);		
				}
			}
			
			$(".tiled_image_big").css('-webkit-transition-delay', "1s");	
			$(".tiled_image_mid").css('-webkit-transition-delay', "2s");	
			$(".tiled_image_small").css('-webkit-transition-delay', "3s");	
		}
			
	}

	function randomRange(n1, n2) {
		return Math.floor( (Math.random() * (n2 - n1 + 1)) + n1 );
	}
	</script>
{% endblock %}
